<template>
	<view class="content p-x-20 p-y-20">
		<view class="">
			<uv-swiper :list="swiperList" indicator indicatorMode="line" circular></uv-swiper>
		</view>
		<view class="m-t-20 radius-10" style="background-color: #fff;">
			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#dbdbdb"
				indicator-active-color="#ff7218">
				<swiper-item class="flex-a flex-wrap" v-for="item in iconList">
					<view @click="grabPath(item1)" class="" style="width: 25%;" v-for="item1 in item.childer">
						<view class="flex-column1">
							<image class="w-80 h-80" :src="item1.image" mode=""></image>
							<text>{{ item1.name }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="m-t-40" v-if="grabList.length>0">
			<view class="m-t-20" v-for="(item,index) in grabList" :key="index">
				<view class="center_list" v-if="item.countdown">
					<view class="text-c bold m-t-20">
						剩余：<text style="color: red;">{{item.countdown}}</text> 秒
					</view>
					<view class="flex m-t-50" @click="orderInfo(item)">
						<image class="w-150 h-150" :src="item.productImg" mode=""></image>
						<view class="m-l-20 flex flex-column3" style="flex: 1;">
							<view class="bold">{{item.productName}}</view>
							<view class="">
								<view class="size-28 w-80 text-c radius-10 m-t-10" style="border: 5rpx solid #e3e3e3;color: #e39b30;">
									外带
								</view>
							</view>
							<view class="size-30 m-t-10 bold" style="color: #999;">
								{{item.storeName}}
							</view>
							<view class="size-28 m-t-10 flex-b" style="color: #999;">
								<text>市场价：￥{{item.totalAmount}}</text>
								<view class="flex">
									<uv-icon name="map"></uv-icon>
									<!-- <text>武汉</text> -->
								</view>
							</view>
						</view>
					</view>
					<view @click="grabOk(item)" class="p-y-15 text-c radius-10 white bold m-t-20" style="background-color: #e33d30;">
						抢单
					</view>
					<view class="po-a p-y-15 p-x-10" style="top: 0%;right: 2%;background-color: #e33d30;border-radius: 0 0 10rpx 10rpx;">
						<text class="bold white">
						  {{item.realTotalAmount}}
						  <text class="size-28">元</text>
						 </text>
					</view>
					<view class="po-a" style="left: -1%;top: -2%;">
						<image class="w-100 h-100" src="/static/image/label.png" mode=""></image>
						<view class="po-a white size-24 bold" style="top: 20%;left: 30%;">
							新
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
		onLaunch,
		onReady,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {dataGong,sortJsonKeys,sortAndFormatParams,combine} from '@/utils/encryption.js'
	import {grabOrderList,grabTo} from '@/api/index.js'
	let swiperList = ref([
		'/static/image/selectedGoods.png',
	])
	let iconList = ref([{
			id: 1,
			childer: [
				{
					name: '收券',
					platform:0,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'https://portal.mdlvip.cn/',
						
				},
				{
					name: '麦当劳',
					platform:1,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'/pagesA/grab/grab',
					
				},
				{
					name: '肯德基',
					platform:2,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'/pagesA/grab/grab',
					
				},
				{
					name: '瑞幸咖啡',
					platform:3,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'/pagesA/grab/grab',
					
				},
				{
					name: '汉堡王',
					platform:4,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'/pagesA/grab/grab',
					
				},
				{
					name: '德克士',
					platform:6,
					image: 'http://quanma51.com/wap/dist/images/33d76d9f.mc.png',
					path:'/pagesA/grab/grab',
					
				}
			]
		},
	])
	
	let grabList = ref([])
	// 初始化倒计时
	let timerId = setInterval(updateCountdown, 1000);
	onLoad((value)=>{
		// if(value.token){
		// 	uni.setStorageSync('token',value.token)
		// }
		uni.setStorageSync('token','eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjE0OCIsImxvZ2luX2NsaWVudF90eXBlIjoiTUlOSV9QUk9HUkFNIn0.W9GFeuCLvY0rY_w_FfLZp_a4FSaxNKhnBBlpJhtnMyE_1XC_0TsVSooL9XclQS2Bx8aewpbFAoYFYtSAYUi22w')
		getGrabOrderList()
	})
	onUnmounted(() => clearInterval(timerId));
	
	onShow(()=>{
		
	})
	
	onUnload(()=>{
		grabList.value = []
	})
	
	const getGrabOrderList = ()=> {
		let cityJinWei = {
			...dataGong(),
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabOrderList(cityJinWei,combineTrue).then(res=>{
			console.log(res);
			grabList.value = res.data
			grabList.value.forEach(item=>{
				let createTime = new Date(item.createTime).getTime(); // 创建时间
				const countdownSeconds = item.receivingTimeNum;     // 剩余秒数
				const endTime = createTime + countdownSeconds * 1000
				console.log('endTime-------',endTime);
				item.endTime = endTime
			})
		})
	}
	
	function updateCountdown (){
		grabList.value = grabList.value.map(order => {
			const now = Date.now();
			if (now >= order.endTime) {
				order.countdown = '已超时'; // 如果当前时间超过结束时间，则标记为超时
				order.isExpired = true
			} else {
				const diff = Math.max(0, parseInt((order.endTime - now) / 1000)); // 计算剩余秒数
				order.countdown = formatSeconds(diff);
			}
			return order
		}).filter(order => !order.isExpired)
	}
	
	const formatSeconds = (seconds) => {
		const h = Math.floor(seconds / 3600);
		const m = Math.floor((seconds % 3600) / 60);
		const s = seconds % 60;
		return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
	}
	
	// 查看商品详情
	const orderInfo = (value)=>{
		console.log(value);
		uni.navigateTo({
			url:`/pagesA/grab/grabQuotation?id=${value.id}&merchantId=${value.merchantId}&type=1&status=0`
		})
	}
	// 抢单
	const grabOk = (value)=>{
		// console.log(value);
		let cityJinWei = {
			id:value.id,
			merchantId:value.merchantId,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabTo(cityJinWei,combineTrue).then(res=>{
			if(res.code==0){
				uni.showToast({
					title: res.message,
					icon: "none",
				})
				grabList.value.forEach((item,index)=>{
					grabList.value = grabList.value.filter(item=>item.id!=value.id)
				})
				uni.navigateTo({
					url:`/pagesA/grab/grabQuotation?id=${value.id}&merchantId=${value.merchantId}&type=2&status=2`
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: "none",
				})
			}
		})
	}
	
	const grabPath = (value)=>{
		if(value.platform==0){
			 let token = uni.getStorageSync('token')
			 window.top.location.href = `https://portal.mdlvip.cn/?token=${token}`
		} else if(value.platform==1){
			uni.showToast({
				title: '暂未开放',
				icon: "none",
			})
		} else {
			uni.navigateTo({
				url:`/pagesA/grab/grabRx?platform=${value.platform}`
			})
		}
	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
	}
	.content {
		.center_list{
			padding: 10rpx 20rpx 20rpx 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;
		}
		.center_list:first-child{
			margin-top: 0rpx;
		}
	}
</style>
